<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
	#allmap{
		height:500px;
		width:100%;
	}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E11ef5f194c0c35e87f46d5d0adea53f"></script>
	<title>百度地图测试</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="r-result">
		<input type="button" onclick="add_overlay();" value="添加覆盖物" />
		<input type="button" onclick="remove_overlay();" value="删除覆盖物" />
		|
		<input type="button" onclick="showOver()" value="显示" />
		<input type="button" onclick="hideOver()" value="隐藏" />
		|
		<button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
		<button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
		|
		<button onclick="getLinePoints();">获取线的点</button>
		<button onclick="removePointInpolyline();">移除线的点</button>
	</div>
	
	
	<!-- 
	公司坐标：
	百度地图坐标 113.268765, 23.139696
	 -->
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("allmap");    // 创建Map实例
		var point  = new BMap.Point(113.268765, 23.139696);
		map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别（共19级）
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		//添加控件和比例尺
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
		/*缩放控件type有四种类型:
		BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		
		//获取指定点的坐标打印到后台
		map.addEventListener("mouseover",function(e){
			console.log(e.point.lng + "," + e.point.lat);
		});
		
		//覆盖物-点
		var marker = new BMap.Marker(point);  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		//marker.addEventListener("click",getAttr);//事件监听器-点击
		/* function getAttr(){
			var p = marker.getPosition();       //获取marker的位置
			alert("marker的位置是" + p.lng + "," + p.lat);   
		} */
		
		//文字标注
		var label = new BMap.Label("中智软件",{offset:new BMap.Size(20,-10)});
		marker.setLabel(label);
		
		
		//添加覆盖物
		function add_overlay(){
			//重新添加覆盖物时，文字标注要重新加入
			var label = new BMap.Label("中智软件",{offset:new BMap.Size(20,-10)});
			marker.setLabel(label);
			
			map.addOverlay(marker);            //增加点
			map.addOverlay(polyline);          //增加折线
			map.addOverlay(circle);            //增加圆
			map.addOverlay(polygon);           //增加多边形
			map.addOverlay(rectangle);         //增加矩形
		}
		//清除所有覆盖物
		function remove_overlay(){
			map.clearOverlays();         
		}
		
		//显示覆盖物
		function showOver(){
			marker.show();
			polyline.show();
			circle.show();
		}
		//隐藏覆盖物
		function hideOver(){
			marker.hide();
			polyline.hide();
			circle.hide();
		}
		
		//信息窗口
		var opts = {
		  width : 200,     // 信息窗口宽度
		  height: 100,     // 信息窗口高度
		  title : "中智软件" , // 信息窗口标题
		  enableMessage:true,//设置允许信息窗发送短息
		  message:"广州市中智软件开发有限公司"
		}
		var infoWindow = new BMap.InfoWindow("地址：广州市越秀区连新路171号省科技厅大院3号楼4楼", opts);  // 创建信息窗口对象 
		marker.addEventListener("click", function(){          
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		});
		
		
		//可编辑线
		var polyline = new BMap.Polyline([
       		new BMap.Point(113.268415,23.140564),
       		new BMap.Point(113.268433,23.138068),
       		new BMap.Point(113.269789,23.13791),
       		new BMap.Point(113.269901,23.140377),
       		new BMap.Point(113.268415,23.140564)
       	], {strokeColor:"red", strokeWeight:6, strokeOpacity:0.8});   //创建折线
       	map.addOverlay(polyline);   //增加折线
       	
       	//可编辑面
       	var polygon = new BMap.Polygon([
       		new BMap.Point(113.268693,23.140003),
       		new BMap.Point(113.268675,23.139646),
       		new BMap.Point(113.268828,23.13963),
       		new BMap.Point(113.268864,23.139999)
       	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.8});  //创建多边形
       	map.addOverlay(polygon);   //增加多边形
       	
       	//获取线的点
       	function getLinePoints(){
       		var points = polyline.getPath();//获取线的所有点
       		var pointString = "";
       		for(var i = 0; i<points.length;i++){
       			pointString = pointString+points[i].lng+","+points[i].lat+"\n";//获取点的所有坐标
       		}
       		alert("获取线的点:\n"+pointString);
       	}
       	//移除线的点
       	function removePointInpolyline(){
       		alert(polygon);
       	}
       	
       	
	</script>
</body>
</html>
